<template>
    <el-dialog
        v-model="dialog.visible"
        :title="dialog.title"
        :width="width"
        :before-close="beforeClose"
        :close-on-click-modal="false"
    >
        <slot></slot>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="doCancel">取消</el-button>
                <el-button type="primary" @click="doConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref,reactive } from 'vue'

let props = defineProps({
    dialog: {
        type: Object
    },
    width: {
        default: '30%'
    }
})
/* 
// 示例prop
let dialog = ref({
    title:'',
    visible:true
}) 
*/
let emits = defineEmits({
    close: null, // null的意思是不校验
    confirm:null,
})

// 此方法, 在用户点击关闭按钮或者对话框的遮罩区域时被调用
function beforeClose(done) {
    emits('close') // 把事件抛出去
    done && done() // 需要调用done, 才能将dialog关闭（el文档中还展示了弹出一个确认框，再调用done）

}

// 用户点击取消按钮
function doCancel() {
    emits('close') // 把事件抛出去
    props.dialog.visible = false // 虽然我不能动绑定的dialog, 但是我可以动绑定的dialog里面的属性
}

// 用户点击确认按钮
function doConfirm() {
    emits('confirm') // 把事件抛出去
}

</script>

<style lang="scss">

</style>